<template>
  <div class="fillcontain">

    <div class="bus_b">

      <h2 class="title">分组列表</h2>

    </div>


    <div class="table_container">
        <div class="tab_search clearfix">
            <div class="fl">
                <div class="search_inp el-input">
                    <input type="text" autocomplete="off" placeholder="请输入分组名称" class="el-input__inner">
                </div> 
                <button type="button" class="el-button el-button--primary">
                    <i class="search"></i>
                    <span>搜索</span>
                </button>
            </div> 
            <div class="fr">
                <el-button type="default" size="small">刷新</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="handleEdit()" size="small">新建分组</el-button>
            </div>
        </div>
            <el-table
                :data="tableData"
                size="small"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="分组名称"
                    width="260">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="分组ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="mode"
                    width="180"
                    label="添加时间">
                </el-table-column>
                <el-table-column
                    prop="alarmStatus"
                    width="180"
                    label="告警负责人">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" type="text">查看</el-button>
                        <el-button size="small" type="text">修改</el-button>
                        <el-button size="small" type="text" @click="del">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <div class="Pagination">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="20"
                layout="total, prev, pager, next"
                :total="count">
                </el-pagination>
            </div>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1, //当前页
      count: 10, //总记录数
      tableData: [
        {
          id: "",
          name: "",
          mode: "",
          alarmStatus: "",
          onlineStatus: "",
          onStatus: "",
          mac: ""
        }
      ]
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleCommand(command) {
        console.log(command)
    },
    handleEdit(index, row, afals) {
      if (index !== undefined) {
        this.selectTable = this.tableData[index]
      } else {
        this.selectTable = {}
      }
      this.changeType = 'addEqu'
      this.dialogFormAdd = true
    },
     /*
        * 删除分组
    **/
    del() {
        this.$confirm('确定要删除分组吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          this.$message({
            type: 'success',
            message: '设备删除成功!'
          });
        }).catch(() => {});
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../style/table.less";
</style>

